@(questionForm: Form[Question], q: Question)
    
@import helper._
@import helper.twitterBootstrap._



@choixGroup(field: Field, className: String = "choix") = {
	<div class=@className>
	<table>
	<td>
       @inputText(
            field("descriptifChoix"), 
            '_label -> "Intitule du choix",
            '_showConstraints -> false

        )
    </td>
    <td>
		@input(
			field("estVrai"),
			'_label -> "Reponse", '_showConstraints -> false) { (_, name, value, _) =>
        <SELECT type="text" name="@name">
        	<OPTION>--</OPTION>
        	<OPTION value="true"> Vrai</OPTION>
			<OPTION value="false"> Faux</OPTION>
		</SELECT>
    }
    </td>
    <td>
    	 <a class="removeChoix btn danger">Supprimer</a>
    	 </td>
    </table>
    </div>
    
}

@informationGroup(field: Field, className: String = "choix") = {
    <div class="twipsies well @className">
    	       
        <div class="listeChoix">

            @repeat(questionForm("listeChoix"), min = 2) { choix =>
                
                @choixGroup(choix)
    
            }
            
            @choixGroup(
                questionForm("listeChoix[x]"),
                className = "choix_template"
            )
            
                  <div class="clearfix">
                <div class="input">
                    <a class="addChoix btn success">ajouter un choix </a>
                </div>
            </div>
        
        </div>

    </div>

}


@main("CreateQuestion") {
@header()

    @if(questionForm.hasErrors) {
        <div class="alert-message error">
            <p><strong>Oops</strong> Please fix all errors</p>
        </div>
    }
    
    <br> <h2> <p class="text-info"> Creation d'une question </p></h2>    
        
    <fieldset>


	<input type="hidden" name="numQ" value="0">

	<div class="bs-docs-example" >
	
		<div class="bs-docs-example-after" >
		Etape 2 sur 3 
		</div>
	 	<legend> Question : informations generales </legend>
	 
	    <TABLE>
	    <tr>
	    	<td> Theme de la question : </tr>
	    	<td> <input type="text" value=@q.getChapitre().getMatiere().getTheme().getLibelleT() disabled="disabled"> </tr>
	    </tr>
	    <tr>
	    	<td> Matiere de la question : </tr>
	    	<td> <input type="text" value=@q.getChapitre().getMatiere().getLibelleM() disabled="disabled"> </tr>
	    </tr>    
	    <tr>
	    	<td> Chapitre de la question : </tr>
	    	<td> <input type="text" value=@q.getChapitre().getLibelleC() disabled="disabled"> </tr>
	    </tr>
	    
	    </TABLE>

 	@helper.form(action = routes.CreateQuestion.createQuestionE2(q.getChapitre().getIdChapitre()), 'id -> "form") {
 	 	
 	            <legend>Question : creation</legend>
			<br>
			
			@inputText(
                questionForm("libelleQuestion"), 
                '_label -> "Libelle de la question : ",
                '_showConstraints -> false
            )


            @inputText(
                questionForm("commentaire"), 
                '_label -> "Commentaire de la question (optionnel)"
            )
 
                         @select(
                       questionForm("niveauQuestion.idNiveauQ"), 
                       options(NiveauQuestion.options), 
                       '_label -> "Niveau de la question", '_default -> "-- Choisir un niveau --",
                       '_showConstraints -> false
                   )
       
            <legend>Question : choix</legend>
            <br>
            <div id="choix">
            
                
                @**
                 * Keep an hidden block that will be used as template for Javascript copy code
                 **@
                @informationGroup(
                    questionForm("informations[x]"),
                    className = "profile_template"
                )
              
            
            </div>
            
	</div>		
	
        <div class="actions">
            <a href="./questionE1" class="btn btn-primary"><i class="icon-white icon-circle-arrow-left"></i>Precedent</a>
        	<button type="submit" class="btn btn-primary"> Creer la question <i class="icon-white icon-circle-arrow-right"></i> </button>
        </div>
 
 	}
	<br>

</fieldset>


            
        


    <script type="text/javascript" charset="utf-8">
   $(document).ready(function(){
    	
    	$(function() {
	    $('.choix_template').hide()
    	})

    })

        $('.removeChoix').live('click', function(e) {
            var listeChoix = $(this).parents('.listeChoix')
            $(this).parents('.choix').remove()


            renumber(listeChoix)
        })
        
        $('.addChoix').live('click', function(e) {
            var listeChoix = $(this).parents('.listeChoix')
            var template = $('.choix_template', listeChoix)
            template.before('<div class="clearfix choix">' + template.html() + '</div>')
            renumber(listeChoix)
        })
        
        $('#form').submit(function() {
            $('.choix_template').remove()
        })
        
     
        var renumber = function(phones) {
            $('.choix').each(function(i) {
                $('input', this).each(function() {
                    $(this).attr('name', $(this).attr('name').replace(/listeChoix\[.+?\]/g, 'listeChoix[' + i + ']'))
                })
            $('select', this).each(function() {
                    $(this).attr('name', $(this).attr('name').replace(/listeChoix\[.+?\]/g, 'listeChoix[' + i + ']'))
                })
            })
        }


	</script>
}